import { FilterArticleCondition } from '@/services/creationCenter/typing';
import {
  ProFormDatePicker,
  ProFormDigit,
  ProFormRadio,
  QueryFilter,
} from '@ant-design/pro-components';
import type { GetProps } from 'antd';
import { Card, Input } from 'antd';
import styles from './index.module.scss';

type Props = {
  isSelectOriginal?: boolean;
  getKeyword: (keywords: string) => void;
  getFilterCondition: (filterCondition: FilterArticleCondition) => void;
};

type SearchProps = GetProps<typeof Input.Search>;
const { Search } = Input;
function options(type?: string) {
  return [
    {
      label: '全部',
      value: null,
    },
    {
      label: '√',
      value: type == 'original' ? 0 : 1,
    },
    {
      label: '×',
      value: type == 'original' ? 1 : 0,
    },
  ];
}

const FilterArticle: React.FC<Props> = ({
  isSelectOriginal = true,
  getKeyword,
  getFilterCondition,
}) => {
  function filterArticle(values: FilterArticleCondition) {
    getFilterCondition(values);
  }

  const onSearch: SearchProps['onSearch'] = (keywords) => {
    getKeyword(keywords);
  };
  return (
    <>
      <div>
        <div className={styles.keywords}>
          <Search
            placeholder="输入关键字"
            onSearch={onSearch}
            size="large"
            enterButton
          />
        </div>

        <Card>
          <QueryFilter
            defaultCollapsed
            defaultColsNumber={3}
            onFinish={filterArticle}
            initialValues={{
              topUp: null,
              popular: null,
              original: null,
              pageView: 0,
              wordsNum: 0,
              commentNum: 0,
            }}
          >
            <ProFormRadio.Group
              name="topUp"
              label="置顶"
              radioType="button"
              options={options()}
            />
            <ProFormRadio.Group
              name="popular"
              label="热门"
              radioType="button"
              options={options()}
            />
            {isSelectOriginal && (
              <ProFormRadio.Group
                name="original"
                label="原创"
                radioType="button"
                options={options('original')}
              />
            )}
            <ProFormDatePicker name="createTime" label="创建时间" />
            <ProFormDatePicker name="updateTime" label="更新时间" />
            <ProFormDigit
              label="阅读量"
              name="pageView"
              min={0}
              fieldProps={{ precision: 0 }}
              placeholder="至少"
            />
            <ProFormDigit
              label="字数"
              name="wordsNum"
              min={0}
              fieldProps={{ precision: 0 }}
              placeholder="至少"
            />
            <ProFormDigit
              label="评论数"
              name="commentNum"
              min={0}
              fieldProps={{ precision: 0 }}
              placeholder="至少"
            />
          </QueryFilter>
        </Card>
      </div>
    </>
  );
};

export default FilterArticle;
